<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:fragment="part">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../css/shopping/shopping.css">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="../js/mypost/fenye2.0.js"></script>
    <title>Title</title>


</head>
<body>



    <div id="main">
        <div id="left">
            <div id="left-one">
                <span>
                    商品总数量：11 份
                    <br>
                    累计交易量：22 个
                </span>
                <br>
                <input id="submit" type="submit" value="个人中心" onclick="f1()">
            </div>

            <div id="left-two">

                <form id="myForm" th:action="@{shopping}" method="GET">
                    <input type="text"    placeholder="根据商品名查询"
                           id="text" name="bname" value="">
                    <input id="search" type="submit" value="搜索" onclick="f1()">
                </form>
            </div>

            <div id="left-three">
                <div id="pick">
                    <span id="titletext">热门商品</span>
                </div>
                <div id="goodimg">
                    <table id="c2">
                        <tr id="A">
                            <td id="lione">
                                <div id="imgone"><img id="perMesPic" src="../../images/badge/ji.gif" width="147" height="112"></div>
                            </td>
                            <td id="litwo">
                                <div id="imgtwo"><img src="../../images/badge/A.gif" width="147" height="112"></div>
                            </td>
                        </tr>
                        <tr id="B">
                            <td id="lithree">
                                <div id="imgthree"><img src="../../images/badge/SD.gif" width="147" height="112"></div>
                            </td>
                            <td id="lifour">
                                <div id="imgfour"><img src="../../images/badge/MVP.gif" width="147" height="112"></div>
                            </td>
                        </tr>
                        <tr id="C">
                            <td id="lifine">
                                <div id="imgfine"><img src="../../images/badge/xin.gif" width="147" height="112"></div>
                            </td>
                            <td id="lisix">
                                <div id="imgsix"><img src="../../images/badge/hong.gif" width="147" height="112"></div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div id="left-four">
                <div id="pick2">
                    <span id="title">成功下单</span>
                </div>
                <p>
                    guet 成功购买了鸡年生肖勋章!<br>
                    145609 成功购买了军人挂件!<br>
                    145609 成功购买了五星勋章!<br>
                    145609 成功购买了志愿者挂件!<br>
                    guet 成功购买了小红帽纪念勋章!<br>
                    145609 成功购买了红星挂件!<br>
                    145609 成功购买了党徽挂件!<br>
                    guet 成功购买了up向上!<br>
                    guet 成功购买了幸运luck!<br>
                    guet 成功购买了六扇门!<br>
                    guet 成功购买了猪年生肖勋章!<br>
                </p>
            </div>
        </div>
        <div id="right">


            <div id="goodlist">
                <table id="adminTbody">
                    <tr th:each="shopping,shoppingStat : ${shoppings}" onmouseover="this.style.backgroundColor='lightslategray';" onmouseout="this.style.backgroundColor='#d4e3e5';">
                        <td id="AA">
                            <div id="img1"><img th:src="@{${shopping.bpath}}" th:width="232" th:height="178"></div>
                            <div id="item1">
                                <div th:id="bname" th:text="@{${shopping.bname}}" ></div>
                                价格：<span th:text="@{${shopping.bprice}}" th:id="SS"></span>积分
                                <span style="display: none" th:text="${shopping.bid}"></span>
                                <br>

                                <input class="buy" type="submit" value="点击购买" onclick="show()">
                            </div>
                        </td>
                    </tr>
                </table>
            </div>


            <div class="layui-card-body ">
                <div class="page">
                    <div>
                        <a class="num" href="###" id="firstPage">首页</a>
                        <a class="prev" href="###" id="prePage">&lt;&lt;</a>
                        <span class="current" id="currentPage"></span>
                        <a class="next" href="###"id="nextPage">&gt;&gt;</a>
                        <a class="num" href="###" id="lastPage">尾页</a>
                        <a class="num" href="###" id="totalpage"></a>
                        <a class="num"> <select  id="jumpWhere"> </select></a>
                        <a href="###" id="jumpPage" onclick="jumpPage()">跳转</a>
                        <a class="num" id="countsum"></a>
                    </div>
                </div>
            </div>

            <div>
                <span>注意：每个用户每种商品只能购买一次</span>
            </div>

        </div>


      </div>


    <!--弹窗-->
<!--    <form th:action="@{buybuy}" method="GET">-->
        <div id="goodshow" style="display:none;">
            <div id="show">
                <div id="head">
                    <span>购买</span>
                    <img id="cancel" src="../../images/badge/quxiao.png" width="25" height="25" onclick="hiden()">
                </div>
                <div id="fade">
                    <span>您确定购买该商品吗？</span>
                    <p id="pp">当前已拥有<span id="totalgrade" name="totalgrade"></span>积分</p>
                    <input class="buya" type="submit" value="确定购买" onclick="hiden()">
                    <input class="buyb" type="button" value="取消购买" onclick="hiden()">
                </div>
            </div>
        </div>
<!--    </form>-->

    <script>
        //弹窗
        function show(){
            document.getElementById("goodshow").style.display = 'block';
        }
        function hiden(){
            document.getElementById("goodshow").style.display='none';
        }

        var bprice;
        var bid
        //点击购买
        $(".buy").click(function (back) {
            $.get('/shop/findbyuserid',function (data) {
                $.each(data, function (index, value) {
                    $('#totalgrade').text(value.totalgrade);
                });
            });
            // console.log(document.getElementsByClassName("buy").parent().children[1]);
            //获得对应的数据
            bprice = $(this).parent().children('span').eq(0).text();
            bid = $(this).parent().children('span').eq(1).text();
        });
        //确认购买
        $(".buya").click(function(){
            $.post('buybuy',{bprice:bprice,bid:bid},function (back) {
                console.log(back);
                if (back=='true'){
                    alert("购买成功！")
                }
                else{
                    alert("你已拥有该商品，购买失败！")
                }
            });
        });
    </script>
</body>
</html>

